<template>
  <div style="display: flex; justify-content: space-between; align-items: center">
    <div style="display: flex; align-items: center">

      <span class="logoname"></span>
    </div>

    <div style="display: flex; align-items: center">


      <el-switch

        style="margin: 0 5px"
        :active-action-icon="Sunny"
        :inactive-action-icon="MoonNight"
        class="switch"
        size="large"
      />
      <el-dropdown >
        <el-button
          link
          type="primary"
          style="display: flex; align-items: center; padding: 0 10px; min-width: 100px"
        >
          <!-- 头像 -->
          <el-avatar
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <!-- 名称 -->
          <span
            style="
              width: 90px;
              margin-left: 10px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            "
          >
            {{ '未登录' }}
          </span>
        </el-button>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item command="SettingPerson" :icon="Avatar">
              <span>个人主页</span>
            </el-dropdown-item>
            <el-dropdown-item :icon="Download" command="Download">
              <span>客户端下载</span>
            </el-dropdown-item>
            <el-dropdown-item :icon="ChatRound" command="ChatRound">
              <span>系统通知</span>
            </el-dropdown-item>
            <!-- 退出系统 -->
            <el-dropdown-item command="outTo" divided :icon="SwitchButton">
              <span>安全退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>

</template>
<script>

import {Avatar, ChatRound, Download, MoonNight, Sunny, SwitchButton} from "@element-plus/icons-vue";
import {defineComponent} from "vue";

export default defineComponent({
  computed: {
    SwitchButton() {
      return SwitchButton
    },
    ChatRound() {
      return ChatRound
    },
    Download() {
      return Download
    },
    Avatar() {
      return Avatar
    },
    MoonNight() {
      return MoonNight
    },
    Sunny() {
      return Sunny
    }
  }
})

</script>

<style lang="scss" scoped>
.el-dropdown:focus-visible {
  outline: none;
}

.logo {
  line-height: 56px;
  height: var(--head-height);
  // box-shadow: 5px 5px 5px slategray;
  filter: drop-shadow(5px 5px 5px rgb(186, 186, 186));
}

.logoname {
  color: rgb(101, 101, 101);
  font-size: 30px;
  text-shadow: 2px 2px 5px rgb(186, 186, 186);
  font-weight: bolder;
}

.promotion-text {
  color: red;
}

.col {
  height: 58px;
  display: flex;
  align-items: center;
  // min-width: 9%;
  // justify-content: space-around;
  justify-content: right;
}

// @media screen and (max-width: 930px) {
//   /* 在屏幕宽度小于或等于600px时应用的样式 */
//   .logoname {
//     font-size: 20px;
//   }
//   .logo {
//     height: 35px;
//   }
//   .userPay {
//     font-size: 10px;
//   }
//   .system-button {
//     display: none;
//   }
// }
.el-radio {
  all: unset;
  display: flex;
  align-items: center;
  height: 30px;
}

@media screen and (max-width: 600px) {
  .promotion-text {
    display: none;
  }
}
</style>
